

<script setup>
import VAsideBar from "./VAsiderBar.vue"
import VHeader from "./VHeader.vue";
import {useRoute} from "vue-router";
import {ref} from "vue";
import store from "../../store/index.js";

const $route = useRoute();


// 组件唯一标识
const componentKey = ref(Math.random());
const refreshComponent = () => {
  componentKey.value = Math.random();
  console.log("refreshComponent", componentKey.value);
};
</script>

<template>
  <div class="main-layout-container">
    <el-container>
      <el-aside :width="store.getters.isCollapsed ? '64px' : '200px'" class="v-layout-aside">
        <!-- 左侧菜单栏区域 -->
        <v-aside-bar/>
      </el-aside>
      <el-container>
        <el-header class="v-layout-header">
          <!-- 头部区域 -->
          <v-header @refresh="refreshComponent"/>
        </el-header>
        <!-- 内容区域，一般是动态显示组件内容的 -->
        <el-main class="v-layout-main">
          <!-- 使用 router-view 渲染组件 -->
          <router-view v-slot="{ Component }">
            <!--  组件切换的时候，加上过渡效果  -->
            <transition name="slide-right" mode="out-in">
              <!--   这里显示具体的组件内容   -->
              <component :is="Component" :key="componentKey"/>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.main-layout-container {
  height: 100vh;
  overflow: hidden;
  background-color: #FAFBFC;
}

.v-layout-aside {
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #ffffff;
  border-right: 1px solid #E6E9F0;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
  /*添加过渡效果*/
  transition: all 0.5s ease;
}

.v-layout-header {
  height: 50px;
  box-sizing: border-box;
  background-color: #FAFBFC;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.v-layout-main {
  height: calc(100vh - 60px);
  overflow-x: hidden;
}

/* 元素进入和离开时候的效果 */
.slide-right-enter-active, .slide-right-leave-active {
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* 告诉浏览器这些属性将会变化，从而可以提前优化性能。 */
  will-change: opacity, transform;
}

/* 开始进入时候的效果 */
.slide-right-enter-from {
  opacity: 0;
  transform: translate3d(-30px, 0, 0);
}

/* 进入结束时候的效果 */
.slide-right-enter-to {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 离开结束时候的效果 */
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(30px, 0, 0);
}
</style>